<!DOCTYPE html>
<html>
<head>
<title>雾霾定位探测系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Weather Report Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../static/css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<!-- //Custom Theme files -->
<!-- js -->
<script src = "../static/js/jquery-2.2.3.min.js"></script>
<script src = "../static/js/owl.carousel.js"></script>
<script>
	$(document).ready(function() { 
		$("#owl-demo").owlCarousel({ 
		  autoPlay: 3000, //Set AutoPlay to 3 seconds
		  items : 3,
		  itemsDesktop : [768,3],
		  itemsDesktopSmall : [414,4]
		});
	 
	}); 
</script>
<script src = "../static/js/echart.js"></script>
<script src="../static/js/skycons.js"></script>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'><!--web font-->
</head>
<body>
	<!-- main -->
	<div class="main-agileits">
        <h1><b>雾霾定位探测系统</b></h1>
		<div class="main-wthree-row"> 
			<div class="agileinfo-text"> 
				<div class="date">
					<script type="text/javascript">
						var mydate=new Date()
						var year=mydate.getYear()
						if(year<1000) year+=1900
						var day=mydate.getDay()
						var month=mydate.getMonth()
						var daym=mydate.getDate()
						if(daym<10) daym="0"+daym
						var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
						var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
						document.write(""+dayarray[day]+" <br> "+daym+"  "+montharray[month]+"  "+year+"")
					</script>
					<!-- //Date-JavaScript -->
				</div>
				<h2 class="temp">&nbsp;</h2>
				<h4 class="location"></h4>
				<h6 class="weather"></h6>
			</div>
			<div class="w3layouts-slider">
				<div id="owl-demo" class="owl-carousel owl-theme">
					<div class="item agile-item">
						<h6>空气质量</h6>
                        <br>
						<h6 class="quality"></h6>
					</div> 
					<div class="item agile-item">
						<h6>质量指数</h6>
                        <br>
						<h6 class="aq"></h6>
					</div> 
					<div class="item agile-item">
                        <h6>PM2.5</h6>
                        <br>
						<h6 class="pm25"></h6>
					</div>  
					<div class="item agile-item">
                        <h6>二氧化硫</h6>
                        <br>
						<h6 class="so2"></h6>
					</div> 
					<div class="item agile-item">
                        <h6>二氧化氮</h6>
                        <br>
						<h6 class="no2"></h6>
					</div> 
					<div class="item agile-item">
                        <h6>外出建议</h6>
                        <br>
						<h6 class="waichu"></h6>
					</div>  
					<div class="item agile-item">
                        <h6>臭氧</h6>
                        <br>
						<h6 class="o3"></h6>
					</div> 
				</div>
				<script>
					 var icons = new Skycons({"color": "#fff"}),
						  list  = [
							"clear-night","clear-day", "partly-cloudy-day", "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind", "fog"
						  ],
						  i;
					  for(i = list.length; i--; )
						icons.set(list[i], list[i]);

					  icons.play();
				</script>
			</div>
	<!-- //main -->
	<!-- copyrights -->
	</div>
                    <div id="weather" class="col-lg-7 col-md-12" style="height:400px"></div>
            <div class="get_weather_info">
                <script>

                    $.get("https://v0.yiketianqi.com/api?version=v61&appid=84261472&appsecret=V4sKMJeP", function(param2){
                            $(".location").text(param2['city']);
                            $(".temp").text(param2['tem'] + '°');
                            $(".weather").text(param2['wea']);
                },"json")
                    $.get("https://v0.yiketianqi.com/api?version=v10&appid=84261472&appsecret=V4sKMJeP",function(result){
                            $(".quality").text(result['air_level']);
                            $(".aq").text(result['air']);
                            $(".pm25").text(result['pm25']);
                            $(".so2").text(result['so2']);
                            $(".no2").text(result['no2']);
                            $(".waichu").text(result['waichu']);
                            $(".o3").text(result['o3']);

                },"json");
                </script>
                <script>
      var weather = echarts.init($('#weather').get(0));
      option = {
          title: {
              text: '未来一周气温',
              subtext: ''
          },
          tooltip: {
              trigger: 'axis'
          },
          legend: {
              data: ['最高气温', '最低气温', '湿度']
          },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: []
          },
          yAxis: {
              scale:true, //纵坐标起始点根据最低值变化
              type: 'value',
              axisLabel: {
                  formatter: '{value} °C'
              }
          },
          series: [{
                  name: '最高气温',
                  type: 'line',
                  data: [],
                  markPoint: {
                      data: [{
                              type: 'max',
                              name: '最大值'
                          }

                      ]
                  },
                  markLine: {
                      data: [{
                          type: 'average',
                          name: '平均值'
                      }]
                  }
              },
              {
                  name: '最低气温',
                  type: 'line',
                  data: [],
                  markPoint: {
                      data: [{
                          type: 'min',
                          name: '最小值'
                      }]
                  },
                  markLine: {
                      data: [{
                              type: 'average',
                              name: '平均值'
                          },

                      ]
                  }
              }
          ]
      };
      weather.setOption(option);
      $.get("https://www.tianqiapi.com/free/week?appid=84261472&appsecret=V4sKMJeP", function (res) {
              option.xAxis.data = [res.data[0].date, res.data[1].date, res.data[2].date, res.data[3].date, res.data[4]
                  .date, res.data[5].date, res.data[6].date
              ]
              option.series[0].data = [parseInt(res.data[0].tem_day), parseInt(res.data[1].tem_day), parseInt(res.data[2]
                  .tem_day), parseInt(res.data[3].tem_day), parseInt(res.data[4].tem_day), parseInt(res.data[5]
                  .tem_day), parseInt(res.data[6].tem_day)]
              option.series[1].data = [parseInt(res.data[0].tem_night), parseInt(res.data[1].tem_night),
                  parseInt(res.data[2].tem_night), parseInt(res.data[3].tem_night), parseInt(res.data[4].tem_night), parseInt(res.data[5]
                      .tem_night), parseInt(res.data[6].tem_night)
              ]

              weather.setOption(option);
          },
      );
                </script>
            </div></div>
	<div class="copy-rights wthree">		 	
		<p>© 2021 Weather Report 刘浩钊B测</p>
	</div>
</body>
</html>
